/* ========== 第一部分：基础重置样式 ========== */
/* 作用：清除所有元素的默认边距和内边距，确保样式一致性 */
*{
    margin: 0;
    padding: 0;
}

/* ========== 第二部分：页面布局容器 ========== */
/* 作用：创建全屏居中布局，为星级评定组件提供展示空间 */
body{
    /* Flexbox布局 - 实现页面居中 */
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    min-height: 100vh;        /* 最小高度为视口高度，确保垂直居中有效 */
    
    /* 视觉样式 */
    background: #333;         /* 深灰色背景 */
}

/* ========== 第三部分：星级评定容器 ========== */
/* 作用：垂直排列多个星级评定组件，提供间距 */
.container{
    /* Flexbox布局 - 垂直排列 */
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    flex-direction: column;   /* 垂直方向排列 */
    gap: 40px;               /* 子元素间距40px */
}

/* ========== 第四部分：单个星级评定组件 ========== */
/* 作用：创建星级评定的外观和布局 */
.rating{
    /* 定位和布局 */
    position: relative;       /* 相对定位，为子元素提供定位参考 */
    display: flex;           /* Flexbox布局 */
    flex-direction: row-reverse;  /* 关键：反向排列，实现星级评定的特殊效果 */
    gap: 4px;               /* 星星之间的间距 */
    
    /* 尺寸和间距 */
    padding: 30px 40px;     /* 内边距：上下30px，左右40px */
    
    /* 外观样式 */
    border: 3px solid #111;  /* 黑色边框，宽度3px */
    border-radius: 30px;     /* 圆角30px，创建圆润外观 */
    background: #353535;     /* 深灰色背景 */
    
    /* 复杂阴影效果 - 创建立体感 */
    box-shadow: 
        30px 30px 30px -10px rgba(0, 0, 0, 0.5),        /* 主阴影：右下角投影 */
        inset 15px 15px 3px rgba(255, 255, 255, 0.1),   /* 内阴影：左上角高光 */
        -4px -4px 15px rgba(255, 255, 255, 0.1),       /* 外阴影：左上角高光 */
        inset -2px -2px 12px rgba(0,0,0,0.75);         /* 内阴影：右下角阴影 */
}

/* ========== 第五部分：星级评定组件的位置调整 ========== */
/* 作用：让三个星级评定组件错开排列，增加视觉层次 */
.rating:nth-child(1){
    transform: translateX(-80px);  /* 第一个组件向左移动80px */
}
.rating:nth-child(3){
    transform: translateX(80px);   /* 第三个组件向右移动80px */
}

/* ========== 第六部分：星级输入框样式 ========== */
/* 作用：隐藏原生radio按钮，创建自定义星级外观 */
.rating input{
    /* 定位和尺寸 */
    position: relative;      /* 相对定位，为伪元素提供定位参考 */
    width: 40px;            /* 宽度40px */
    height: 40px;           /* 高度40px */
    
    /* 布局 */
    display: flex;          /* Flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    
    /* 交互 */
    cursor: pointer;        /* 鼠标悬停时显示手型指针 */
    appearance: none;       /* 关键：移除原生radio按钮的默认外观 */
}

/* ========== 第七部分：星级图标样式 ========== */
/* 作用：使用FontAwesome图标创建星星外观 */
.rating input::before{
    content: '\f005';       /* FontAwesome星星图标的Unicode编码 */
    font-family: fontAwesome; /* 使用FontAwesome字体 */
    font-size: 34px;        /* 图标大小34px */
    color: #111;            /* 默认颜色：深灰色 */
    transition: 0.5s;       /* 颜色变化过渡动画，持续0.5秒 */
}

/* ========== 第八部分：星级交互效果 ========== */
/* 作用：实现星级评定的核心交互逻辑 - 悬停和选中效果 */
.rating input:hover ~ input::before,    /* 悬停时，当前星星及前面的星星变色 */
.rating input:hover::before,            /* 悬停时，当前星星变色 */
.rating input:checked ~ input::before,  /* 选中时，当前星星及前面的星星变色 */
.rating input:checked::before           /* 选中时，当前星星变色 */
{
    color: var(--c);        /* 使用CSS变量设置颜色，实现主题色切换 */
}

/* ========== 核心原理解释 ========== */
/*
1. flex-direction: row-reverse 的作用：
   - 让星星从右到左排列（5→4→3→2→1）
   - 配合 ~ 选择器，实现"选中某个星星，它及前面的星星都变色"的效果

2. appearance: none 的作用：
   - 移除原生radio按钮的默认外观
   - 让自定义的::before伪元素（星星图标）显示出来

3. ~ 选择器的作用：
   - 选择当前元素后面的所有同级元素
   - 配合row-reverse，实现星级评定的特殊交互效果

4. 复杂阴影的作用：
   - 创建立体感和质感
   - 模拟按钮的凸起效果
*/
